<template>
  <div class="contentTop">
    <div class="inputBt" :class="inputBt?'inputBtDark':'inputBtLight'" @click="showWrite = true">
      <n-avatar
        round
        size="medium"
        :src="host + '/api/' + avatar"
      />
      <div style="margin-left: 10px;color: gray;">
        点击发表文章..
      </div>
    </div>
    <div class="contentTopBt">
      <!-- 图片按钮 -->
      <n-button quaternary size="small" @click="showWrite = true">
        <template #icon>
          <n-icon :component="ImageOutline"></n-icon>
        </template>
      </n-button>
      <!-- 表情按钮 -->
      <n-button quaternary size="small" @click="showWrite = true">
        <template #icon>
          <n-icon :component="HappyOutline"></n-icon>
        </template>
      </n-button>
    </div>
    <n-divider />
    <div class="contentTopTag">

    </div>
    <!-- 文章列表 -->
    <ShowEssay
    v-if="essay_list[0]"
    v-for="item in essay_list"
    :key="item.essay_id"
    :essay_data="item"
    ></ShowEssay>
    <n-empty v-else description="快来发布第一篇文章吧" style="height: 265px;justify-content: center;">
    </n-empty>
  </div>

  <n-modal v-model:show="showWrite">
    <n-card
      style="width: 600px;position: fixed;top: 100px;left: calc(50% - 300px);"
      :title="props.space_name"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
      :segmented="segmented"
    >
      <template #header-extra>
        <n-icon
        style="cursor: pointer;"
        :component="CloseOutline"
        size="22"
        @click="showWrite = false
        "/>
      </template>
      <div class="modal_input">
        <div>
          <n-avatar
            round
            size="medium"
            :src="host + '/api/' + avatar"
          />
        </div>
        <n-input v-model:value="essayVlaue"
        type="textarea"
        placeholder="请输入内容"
        show-count
        :autosize="{
          minRows: 3,
          maxRows: 20
        }"
        style="margin-left: 10px;"
        >
          <template #count="{ value }">
            {{ value.length }}
          </template>
        </n-input>
      </div>

      <template #footer>
         <!-- 展示上传图片 -->
        <div class="upload_imgs">
          <div v-for="item in previewFileList" :key="(item.batchId as string)" style="position: relative;margin-right: 10px;">
            <n-image height="80" :src="(host + '/api/' + item.url as string)"/>
            <n-icon
            @click="handleDelete(item.batchId as string)"
            class="close_bt"
            style="cursor: pointer;position:absolute;right: 0;top: 0;"
            :component="CloseOutline"
            size="22"/>  
          </div>
        </div>
        <div class="modal_footer">
          <div class="modal_footer_left">
            <n-upload
              action="api/upload"
              accept="image/*"
              response-type="json"
              :show-file-list="false"
              @finish="handleFinish"
              @error="handleError"
            >
              <n-button quaternary size="small">
                <template #icon>
                  <n-icon :component="ImageOutline"></n-icon>
                </template>
              </n-button>
            </n-upload>
            <!-- // 表情按钮 -->
            <V3Emoji
            :recent="true"
            :theme="osThemeDark?'dark':''"
            :fulldata="true"
            @click-emoji="appendText"
            fix-pos="downcenter"
            >
              <n-button quaternary size="small">
                <template #icon>
                  <n-icon :component="HappyOutline"></n-icon>
                </template>
              </n-button>
            </V3Emoji>
          </div>
          <div>
            <n-button type="primary" size="small" @click="publish">
              发布
            </n-button>
          </div>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup lang='ts'>
import {essayListType} from "../types"
import V3Emoji from "vue3-emoji"
import 'vue3-emoji/dist/style.css' 
import ShowEssay from "../components/showEssay.vue"
import {publishEssay} from "../api/essay.ts"
import { CloseOutline,ImageOutline,HappyOutline } from '@vicons/ionicons5'
import { UploadFileInfo } from 'naive-ui'
import { ref,onMounted,Ref,inject, watch } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from "../store"
const store = useStore()
const router = useRouter()

const host = ref(inject("host"))

const props = defineProps<{
  space_name: string,
  spaceId: number,
  essay_list: essayListType[]
}>()

const osThemeDark = ref(true)
const inputBt = ref(true)
const essayVlaue = ref("")
const avatar = ref("")
const showWrite = ref(false)
const segmented = ref({
  content: 'soft',
  footer: 'soft'
} as const)
const previewFileList:Ref<UploadFileInfo[]> = ref([])

// 发布
const publish = async() => {
  let imgsList:string[] = []
  previewFileList.value.forEach(e => {
    imgsList.push(e.url as string)
  })
  let phone = localStorage.getItem("token")
  const res = await publishEssay({
    spaceId: props.spaceId,
    phone,
    content: essayVlaue.value,
    imgsList: imgsList.join("@")
  })
  if(res.code!="200"){
    window.$message.warning(res.message)
  }else{
    router.go(0)
    window.$message.success("发布成功")
    showWrite.value = false
  }
}

// 选择表情
const appendText = (value:any) => {
  essayVlaue.value = essayVlaue.value + value.emoji
}

// 上传成功回调
const handleFinish =(options: { file: UploadFileInfo, event?: ProgressEvent}) => {
  options.file.url = (options.event?.target as XMLHttpRequest).response?.url
  previewFileList.value.push(options.file)
}

// 删除图片回调
const handleDelete = (batchId:string) => {
  previewFileList.value = previewFileList.value.filter(e => e.batchId!=batchId)
}

// 上传失败
const handleError = () => {
  window.$message.warning("上传失败")
}

onMounted(() => {
  inputBt.value = store.osTheme=="dark"?true:false
  avatar.value = localStorage.getItem("avatar") as string
  osThemeDark.value = store.osTheme=="dark"?true:false
})

watch(() => store.osTheme, (newValue) => {
  osThemeDark.value = newValue=="dark"?true:false
  inputBt.value = newValue=="dark"?true:false
})
</script>

<style lang='scss' scoped>
  .contentTop{
    // width: 100%;
    // height: 200px;
    padding: 15px;
    box-sizing: border-box;
    .inputBt{
      height: 40px;
      padding: 20px;
      cursor: pointer;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
    .contentTopBt{
      padding: 20px 0 0 0;
      display: flex;
      justify-content: flex-start;
    }
    .inputBtDark{
      background-color: rgba(255, 255, 255, 0.06);
    }
    .inputBtLight{
      background-color: rgb(250, 250, 252);
    }
  }
  .modal_input{
    display: flex;
    justify-content: flex-start;
  }
  .upload_imgs{
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    img:hover{
      opacity: 0.5;
    }
    .close_bt:hover{
      // border:1px solid #63e2b7;
      background-color: rgb(135, 134, 134);
      border-radius: 25px;
    }
  }
  .modal_footer{
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .modal_footer_left{
      display: flex;
      justify-content: flex-start;
    }
  }
</style>